<template>
  <div class="user_message_max">
    <el-drawer
      size="100%"
      :visible.sync="dialogVisible"
      direction="rtl"
      :before-close="handleClose"
      @open="openHandler"
    >
      <div slot="title">
        <div class="titleCls">{{ editUserId ? '编辑信息' : '新增信息' }}</div>
      </div>
      <el-form class="formCls" :model="addFormData.userInfo" ref="dialogDom" :rules="configForm" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告标题" prop="noticeTitle">
              <el-input v-model.trim="addFormData.userInfo.noticeTitle" placeholder="公告标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model.trim="addFormData.userInfo.projectName" placeholder="项目名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="公告类型" prop="noticeType">
              <el-select
                :disabled="this.$route.meta.type != 5"
                v-model="addFormData.userInfo.noticeType"
                placeholder="请选择公告类型"
              >
                <el-option
                  v-for="item in organizationTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="招标类型" prop="type">
              <el-select v-model="addFormData.userInfo.type" disabled placeholder="请选择招标类型">
                <el-option v-for="item in organizeTreeList" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编号" prop="projectCode">
              <el-input v-model.number="addFormData.userInfo.projectCode" placeholder="项目编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告内容" prop="noticeContent">
              <quill-editor
                ref="myQuillEditor"
                v-model="addFormData.userInfo.noticeContent"
                :options="editorOption"
                class="my-quill-editor"
              ></quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="关联公告">
              //下拉列表 
             
              <el-input v-model.trim="addFormData.userInfo.cascadeNoticeId" placeholder="公告标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="公告附件">
              <!-- noticeUrl -->
              <!-- noticeFileName -->
              <uploadComf @change="changeFielHandler" :urlFid="addFormData.userInfo.noticeUrlFid"></uploadComf>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="招标文件">
              <!-- purchaseUrl -->
              <!-- purchaseFileName -->
              <uploadComf @change="zbFielHandler" :urlFid="addFormData.userInfo.purchaseFid"></uploadComf>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="采购人名称">
              <el-input v-model.trim="addFormData.userInfo.purchaseName" placeholder="采购人名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购人地址">
              <el-input v-model.trim="addFormData.userInfo.purchaseAddress" placeholder="采购人地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购人电话">
              <el-input v-model="addFormData.userInfo.purchasePhone" placeholder="采购人电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="代理机构名称">
              <el-input v-model.trim="addFormData.userInfo.agentOrganizationName" placeholder="代理机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理机构地址">
              <el-input
                v-model.trim="addFormData.userInfo.agentOrganizationAddress"
                placeholder="代理机构地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代理机构电话">
              <el-input
                v-model.number="addFormData.userInfo.agentOrganizationPhone"
                placeholder="代理机构电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目联系人">
              <el-input v-model.trim="addFormData.userInfo.projectLinkName" placeholder="项目联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目联系电话">
              <el-input v-model.trim="addFormData.userInfo.projectLinkPhone" placeholder="项目联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="报名时间">
              <el-date-picker
                v-model="addFormData.userInfo.signStartDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <!-- <el-input v-model.trim="addFormData.userInfo.signStartDate" placeholder="报名开始时间"></el-input> -->
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="报名截止时间">
              <el-input v-model.trim="addFormData.userInfo.signEndDate" placeholder="报名截止时间"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="投标截止时间">
              <el-date-picker
                v-model="addFormData.userInfo.bidEndDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择投标截止时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="报名费用">
              <el-input v-model.number="addFormData.userInfo.signCost" placeholder="报名费用"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购品目">
              <el-select v-model="addFormData.userInfo.itemsPurchase" placeholder="请选择采购品目">
                <el-option v-for="item in itemsPurchaseList" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
              <!-- 0服务 1货物 2工程 -->
              <!-- <el-input v-model.trim="addFormData.userInfo.itemsPurchase" placeholder="采购品目"></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="采购类型">
              <el-select v-model="addFormData.userInfo.typePurchase" placeholder="请选择采购类型">
                <el-option v-for="item in typePurchaseList" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div style="text-align: center">
              <el-button size="medium" @click="dialogVisible = false">关闭</el-button>
              <el-button size="medium" type="primary" @click="formDataSubmit">提交</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-drawer>
  </div>
  <!-- <el-dialog
    top="5vh"
    :title="`${editUserId ? '编辑' : '新增'}信息`"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
    class="user_message_max"
  >
    

    <div class="submitbtn">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="formDataSubmit">保存</el-button>
    </div>
  </el-dialog> -->
</template>

<script>
import { weightList, classIfyList } from './config'
import { configForm } from '@/utils/tools/RegExpression.js'
import { getOrganizeList } from '@/apiList/api_power'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import Dialog from './Dialog'

import uploadComf from '@/components/custom/SingleUploadFile.vue'
export default {
  name: 'editUsreDialog',
  components: {
    uploadComf
  },
  props: {
    PnoticeType: {},
    Ptype: {},
    show: {
      type: Boolean,
      default: false
    },
    editUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      signStartDate: [], //报名时间
      content: '',

      editorOption: {
        // 占位配置
        placeholder: '请输入...',
        height: '400px',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['link', 'image', 'video'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }] // 文字颜色按钮
          ],
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          }
        }
      },

      configForm,
      classIfyList,
      weightList,
      addFormData: {
        // 新建用户表单
        userInfo: {
          noticeFid: '',
          noticeFileName: '',
          purchaseUrl: '',
          purchaseFileName: '',
          purchaseFid: '',
          noticeUrl: '',
          noticeUrlFid: '',
          noticeContent: '',
          noticeTitle: '',
          projectName: '',
          projectCode: '',
          purchaseName: '',
          purchaseAddress: '',
          purchasePhone: '',
          cascadeNoticeId: '', //关联公告ID
          noticeType: this.PnoticeType == 5 ? '' : this.PnoticeType, //公告类型//指定页面类型固定死(除开全部页面)
          projectLinkName: '',
          projectLinkPhone: '',
          agentOrganizationAddress: '',
          agentOrganizationName: '',
          agentOrganizationPhone: '',
          projectLinkName: '',
          signStartDate: [],
          signEndDate: '',
          bidEndDate: '',
          signCost: '',
          itemsPurchase: '',
          typePurchase: '',
          type: this.Ptype
        }
        // // 公司信息
        // type: ''
      },
      itemsPurchaseList: [
        {
          name: '服务',
          value: 0
        },
        {
          name: '货物',
          value: 1
        },
        {
          name: '工程',
          value: 2
        }
      ],
      // ("采购类型 0公开招标 1邀请招标 2竞争性谈判 3竞争性磋商 4单一来源采购  5询价 6公开招标")
      typePurchaseList: [
        {
          name: '公开招标',
          value: 0
        },
        {
          name: '邀请招标',
          value: 1
        },
        {
          name: '竞争性谈判',
          value: 2
        },

        {
          name: '竞争性磋商',
          value: 3
        },
        {
          name: '单一来源采购',
          value: 4
        },
        {
          name: '询价',
          value: 5
        },
        {
          name: '公开招标',
          value: 6
        }
      ],

      // 类型0超管 1管理员 2招标代理机构 3供应商
      organizeTreeList: [
        {
          name: '工程',
          value: 0
        },
        {
          name: '法律',
          value: 1
        },
        {
          name: '财税',
          value: 2
        }
      ],
      organizationTypeList: [
        {
          name: '招标/采购公告',
          value: 0
        },
        {
          name: '成交/中标公告',
          value: 1
        },
        {
          name: '补遗/澄清/更正公告',
          value: 2
        },
        {
          name: '废标/终止公告',
          value: 3
        },
        {
          name: '履约/合同公告',
          value: 4
        }
      ]
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(v) {
        this.$emit('update:show', v)
      }
    }
  },
  watch: {
    show(v) {
      this.openDialog(v)
    }
  },
  created() {
    this.dialog = new Dialog(this, {
      //新建用户表单
      userInfo: {
        noticeFid: '',
        noticeFileName: '',
        purchaseUrl: '',
        purchaseFileName: '',
        purchaseFid: '',
        noticeUrl: '',
        noticeUrlFid: '',
        noticeContent: '',
        noticeTitle: '',
        projectName: '',
        projectCode: '',
        purchaseName: '',
        purchaseAddress: '',
        purchasePhone: '',
        cascadeNoticeId: '', //关联公告ID
        noticeType: this.PnoticeType == 5 ? '' : this.PnoticeType, //公告类型//指定页面类型固定死(除开全部页面)
        projectLinkName: '',
        projectLinkPhone: '',
        agentOrganizationAddress: '',
        agentOrganizationName: '',
        agentOrganizationPhone: '',
        projectLinkName: '',
        signStartDate: [],
        signEndDate: '',
        bidEndDate: '',
        signCost: '',
        itemsPurchase: '',
        typePurchase: '',
        type: ''
      }
      // 公司信息
      // type: ''
    })
    // 机构树
  },
  methods: {
    changeFielHandler(data) {
      this.addFormData.userInfo.noticeUrl = data[0].url
      this.addFormData.userInfo.noticeUrlFid = data[0].fid
      this.addFormData.userInfo.noticeFileName = data[0].fileName
    },
    zbFielHandler(data) {
      this.addFormData.userInfo.purchaseUrl = data[0].url
      this.addFormData.userInfo.purchaseFid = data[0].fid
      this.addFormData.userInfo.purchaseFileName = data[0].fileName
    },
    getList() {
      this.$emit('getList')
    },
    openDialog(v) {
      if (!v) return
      if (!this.editUserId) {
        this.dialog.addOpenDialog()
      } else {
        this.dialog.editOpenDialog(this.editUserId)
      }
    },
    formDataSubmit() {
      this.dialog.formDataSubmit()
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.addFormData.userInfo = {}
        })
        .catch((_) => {})
    },
    openHandler() {
      this.$nextTick(() => {
        this.addFormData.userInfo = {
          noticeFid: '',
          noticeFileName: '',
          purchaseUrl: '',
          purchaseFileName: '',
          purchaseFid: '',
          noticeUrl: '',
          noticeUrlFid: '',
          noticeContent: '',
          noticeTitle: '',
          projectName: '',
          projectCode: '',
          purchaseName: '',
          purchaseAddress: '',
          purchasePhone: '',
          cascadeNoticeId: '', //关联公告ID
          noticeType: this.PnoticeType == 5 ? '' : this.PnoticeType, //公告类型//指定页面类型固定死(除开全部页面)
          projectLinkName: '',
          projectLinkPhone: '',
          agentOrganizationAddress: '',
          agentOrganizationName: '',
          agentOrganizationPhone: '',
          projectLinkName: '',
          signStartDate: [],
          signEndDate: '',
          bidEndDate: '',
          signCost: '',
          itemsPurchase: '',
          typePurchase: '',
          type: this.Ptype
        }
      })
      console.log(this.addFormData.userInfo.noticeType)
      console.log(this.addFormData.userInfo)
      console.log(this.addFormData.userInfo.type)
      // // 公司信息
      // type: ''
    }
  }
}
</script>

<style lang="less">
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 400px;
}
</style>
<style lang="less" scoped>
.submitbtn {
  margin: 0 auto;
  display: block;
  margin-top: 40px;
  text-align: center;
}
.user_message_max {
  .el-select {
    margin-left: 0 !important;
  }
}

.titleCls {
  padding-bottom: 14px;
  border-bottom: 2px solid #409eff;
  font-size: 22px;
  color: #409eff;
}
.formCls {
  padding: 20px;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
